// 我的试卷页面
<template>
  <div id="myExam">
    <div class="title">我的课程</div>
	
    <div class="wrapper">
      <ul class="top">
        <li class="order">课程列表</li>
        <li id="searchdiv">
          <el-input v-model="keywords" placeholder="课程名称">
            <el-button @click="showCourseInfo()" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </li>
      </ul>
      <ul class="paper" >
		  <div style="height: 10px;"></div>
		  
		  	<el-table :data="pagination.records" border>
		  		<el-table-column fixed="left" prop="courseId" label="课程编号"></el-table-column>
		  		<el-table-column prop="courseName" label="课程名称"></el-table-column>
		  		<el-table-column prop="user.userId" label="教师编号"></el-table-column>
		  		<el-table-column prop="user.userName" label="教师姓名"></el-table-column>
		  		<el-table-column prop="courseStatus" label="是否开课" align="center">
					<template slot-scope="scope">
						<p v-if="scope.row.courseStatus=='0'">未开课</p>
						<p v-if="scope.row.courseStatus=='1'">已开课</p>
					</template>
				</el-table-column>
		  		<el-table-column fixed="right" label="操作">
		  			<template slot-scope="scope">
		  				<el-button @click="uploadDa(scope.row.courseId)" type="warning" size="small">课程资料</el-button>
		  			</template>
		  		</el-table-column>
		  	</el-table>
      </ul>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[6, 10, 20, 40]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </div>

  <el-dialog title="下载课程资料" :visible.sync="uploadDialogVisible" width="30%" :before-close="handleClose">
  	<section class="update">
  		<el-table :data="courseData" border>
  			<el-table-column fixed="left" prop="index" label="编号"></el-table-column>
  			<el-table-column prop="dataName" label="资料名称"></el-table-column>
  			<!-- <el-table-column prop="datasize" label="资料大小"></el-table-column> -->
  			<el-table-column fixed="right" label="资料下载">
  				<template slot-scope="scope">
  			    <el-button @click="downloadData(scope.row.index)" type="warning" size="small">下载</el-button>
  				</template>
  			</el-table-column>
  		</el-table>
  	</section>
  	<span slot="footer" class="dialog-footer">
  		<el-button @click="uploadDialogVisible = false">取 消</el-button>
  		<el-button type="primary" @click="uploadDialogVisible = false">确 定</el-button>
  	</span>
  </el-dialog>
 </div>
</template>

<script>
export default {
  // name: 'myExam'
  data() {
    return {
      pagination: {
      	//分页后的考试信息
      	current: 1, //当前页
      	total: null, //记录条数
      	size: 6, //每页条数
      },
      uploadDialogVisible: false,
      form: {
      	courseId:'',
      	courseName:'',
      	user:{userId:'',userName:''},
      	courseData:'',
      	courseStatus:''
      }, //保存点击以后当前试卷的信息
      keywords:'',
      courseData:[],
	    student:{userId:this.$cookies.get("cid"),userName:this.$cookies.get("cname")}
      
    }
  },
  created() {
    this.showCourseInfo()
  },
  methods: {
    //改变当前记录条数
    handleSizeChange(val) {
      this.pagination.size = val
      this.getExamInfo()
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getExamInfo()
    },
    //搜索试卷
	uploadDa(courseId) {
		this.uploadDialogVisible=true
		this.$axios( '/api/course/getcoursebyid/'+courseId).then(res => {
			this.form = res.data
		})
		this.$axios( '/api/course/getcoursedatabyid/'+courseId).then(res => {
			this.courseData = res.data
		})
		
		console.log(this.imageAction)
	},
	downloadData(index){
		let tempPage = window.open('_blank');//先打开一个空白页
		
		tempPage.location =  '/api/course/download/'+this.form.courseId+'/'+index; //再设置空白页的地址
		
	},
    showCourseInfo() {
      this.$axios( '/api/course/listcoursebystudent',{
					    params: {
							userId:this.student.userId,
					      keywords:this.keywords,
					      page:this.pagination.current,
					      limit:this.pagination.size
					    }
					  }).then(res => {
						  console.log(res.data)
					  	this.pagination = res.data;
					  }).catch(error => {});
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  padding: 20px 0px 30px 0px;
  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
.paper {
  h4 {
    cursor: pointer;
  }
}
.paper .item a {
  color: #000;
}
.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.item .info i {
  margin-right: 5px;
  color: #0195ff;
}
.item .info span {
  margin-right: 14px;
}
.paper .item {
  width: 360px;
  height: 140px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
  transition: all 0.6s ease;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}
.paper * {
  margin: 20px 0;
}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
#myExam .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;
}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}
#myExam {
  width: 980px;
  margin: 0 auto;
}
#myExam .title {
  margin: 20px;
}
#myExam .wrapper {
  background-color: #fff;
}
#searchdiv{
  width: 250px;
  display: inline-block;
  margin-left: 60%;
  margin-bottom: 17px;
}
</style>
